<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body>
		<h2>姓名，年龄，爱好(数组)，女朋友(对象)，豪车(对象数组)</h2>
		<div id="app">
			{{$data}},
			<hr >
			{{msg}},{{name}}
			<hr >
			{{age}}
			<hr >
			{{hobby}},{{hobby[0]}}
			<hr >
			{{hobby[hobby.length-1]}},{{hobby.length}}
			<hr >
			{{girlfriend}}
			<hr >
			{{girlfriend.name}},{{girlfriend.age}}
			<hr >
			{{cars}}
			<hr >
			{{cars[0]}}
			<hr >
			{{cars[0].color}},{{cars[0].name}}
			<hr >
			{{cars[cars.length-1]}}
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				msg:"万象更新",
				name:"牛魔王",
				age:5222,
				hobby:["吃草","冲撞","非红色"],
				girlfriend:{
					name:"铁扇公主",
					age:45344
				},
				cars:[
					{name:"五菱宏光",color:"write"},
					{name:"五菱荣光",color:"灰"},
					{name:"五菱之光",color:"暗金色"},
					{name:"mini",color:"粉色"}
				]
			}
		});
	</script>
</html>
